<template>
  <div class="hot-review" v-if="review?.length > 0">
    <home-nav :title="title" :more="false"/>
    <div class="content mt-2 mb-4 flex" v-for="hot in review" :key="hot.commentId">
      <div class="avatarUrl w-10 h-10 mr-2">
        <img class="w-full h-full" :src="hot.user.avatarUrl" alt="">
      </div>
      <div class="flex flex-col flex-1">
        <span class="user-name text-xs">
            <span>
              <span class="yu-titleColor" :class="hoverStyle">{{ hot.user.nickname }}</span>
              <span class="w-3 h-3 inline-block yu-color-text mr-1 ml-1" v-if="hot.user.avatarDetail">
                <img class="w-full h-full" :src="hot.user.avatarDetail.identityIconUrl" alt="">
              </span>
              <span
                  v-if="hot.user.vipRights"
                  class="yu-bgColor-tew-only yu-titleColor inline-block p-0.5 text-xs rounded-full ml-1"
              >
                vip {{ hot.user.vipRights.redVipLevel }}
              </span>
            </span>
          <span class="text-justify">：{{ hot.content }}</span>
         </span>
        <span class="Reply inline-block w-full yu-bgColor-tew-only text-xs p-3 mt-2 mb-2 box-border" v-if="hot?.beReplied?.length > 0">
          <span class="user-name text-xs">
            <span>
              <span class="yu-titleColor" :class="hoverStyle">{{ hot.beReplied[0].user.nickname }}</span>
              <span class="w-3 h-3 inline-block mr-1 ml-1" v-if="hot.beReplied[0].user.avatarDetail">
                <img class="w-full h-full" :src="hot.beReplied[0].user.avatarDetail.identityIconUrl" alt="">
              </span>
              <span
                  v-if="hot.beReplied[0].user.vipRights"
                  class="bg-black text-white inline-block p-0.5 text-xs rounded-full ml-1">
                vip {{ hot.beReplied[0].user.vipRights.redVipLevel }}
              </span>
            </span>
          </span>
          <span class="text-justify">：{{ hot.beReplied[0].content }}</span>
        </span>
        <span class="text-xs mt-3 text-gray-400 flex justify-between">
          <span class="w-30 yu-titleColor">{{ hot.timeStr }}</span>
          <span class="flex-1 text-right">
            <span :class="hoverStyle" v-if="hot.user.userId === store.userInfo.userId" @click="removeReply(hot.commentId)">删除</span>
            <span
                class="text-sm ml-2"
                :class="[hoverStyle, hot.liked ? 'yu-textColor-active' : '']"
                @click="isLike(hot.commentId, hot.liked)">
              <van-icon name="like-o"/>
              <span>（{{ convert(hot.likedCount, 1) }}）</span>
            </span>|
            <span :class="hoverStyle" @click="openReply(hot.commentId)">回复</span>
          </span>
        </span>
        <div class=" w-full mt-2" v-if="store.token &&(saveCommentId === hot.commentId)">
          <van-cell-group inset>
            <van-field v-model="replyMessage" label="回复信息：" maxlength="140"  show-word-limit />
          </van-cell-group>
          <div class="flex justify-end mr-4 mt-2">
            <YuButton @click="sendReply">回复</YuButton>
          </div>
        </div>
      </div>
    </div>
    <slot name="page"></slot>
  </div>
</template>

<script setup>
import convert from '@/hooks/filter'
import HomeNav from '@/components/HomeNav/index.vue'
import YuButton from '@/components/YuButton/index.vue'
import { reactive, toRefs } from "vue"
import { useStore } from "@/store/index"
import {Notify} from "vant";

const store = useStore()
const data = reactive({
  hoverStyle: 'yu-textColor-hover cursor-pointer yu-color-text',
  replyMessage: '', // 回复信息
  saveCommentId: null // 存储当前点击回复的id
})
const { hoverStyle, replyMessage, saveCommentId } = toRefs(data)
defineProps({
  review: Object,
  title: String
})

// 点击设为喜欢
const isLike = (cid, isLiked) => {
  let t = isLiked ? 0 : 1 // 0是取消点赞 1是点赞, type判断是歌单还是其他的
  const { type } = store.currentInfo
  let params = {
    type: 2
  }
  const currentType = {
    0: () => {
      // 设置歌曲的type
      params.type = 0
    },
    1: () => {
      // 设置歌单的type
      params.type = 2
    },
    2: () => {
      // 设置专辑的type
      params.type = 3
    },
    6: () => {
      // 设置电台的评论
      params.type = 4
    },
    7: () => {
      // 设置动态的评论
      params.type = 6
    },
    10: () => {
      // 设置Mv的评论
      params.type = 1
    },
    // 获取Mv评论
    11: () => {
      params.type = 5
    }
  }
  currentType && currentType[type] && currentType[type]()
  store.sendCommentLike({cid, t, type: params.type })
}

// 点击展开回复框
const openReply = (id) => {
  if (data.saveCommentId !== id) {
    data.saveCommentId = id
  } else {
    data.saveCommentId = null
  }
}
// 可以发送删除回复评论 params = {
// t: 1 发送 2 回复 0 删除， type: 用来判断是0：歌曲还是2：歌单还是其他的,
// id: 对应资源id, content: 要发送的内容， 如果如果要是删除的话这个id是不需要的，
// commentId: 回复评论的id，也是删除的id
// }
const sendReply = async () => {
  if (data.replyMessage) {
    let params = { t: 2, type: 2, content: data.replyMessage, commentId: data.saveCommentId }
    const { type } = store.currentInfo
    const currentType = {
      0: () => {
        // 设置歌曲的type
        params.type = 0
      },
      1: () => {
        // 设置歌单的type
        params.type = 2
      },
      2: () => {
        // 设置专辑的type
        params.type = 3
      },
      6: () => {
        // 设置电台的评论
        params.type = 4
      },
      7: () => {
        // 设置动态的评论
        params.type = 6
      },
      10: () => {
        // 设置动态的评论
        params.type = 1
      },
      11: () => {
        // 设置动态的评论
        params.type = 5
      }
    }
    currentType && currentType[type] && currentType[type]()
    // 发送回复
    await store.sendOrDelComment(params)
    // 清空回复内容
    data.replyMessage = ''
    // 清空回复id
    data.saveCommentId = null
  } else {
    Notify({
      message: '请输入内容',
      background: '#fd0000',
      color: '#ffffff'
    })
  }
}
// 删除我的评论
// 可以发送删除回复评论 params = {
// t: 1 发送 2 回复 0 删除， type: 用来判断是0：歌曲还是2：歌单还是其他的,
// id: 对应资源id, content: 要发送的内容， 如果如果要是删除的话这个id是不需要的，
// commentId: 回复评论的id，也是删除的id
// }
const removeReply = (commentId) => {
  let params = { t: 0, type: 2, commentId }
  const { type } = store.currentInfo
  const currentType = {
    0: () => {
      // 设置歌曲的type
      params.type = 0
    },
    1: () => {
      // 设置歌单的type
      params.type = 2
    },
    2: () => {
      // 设置专辑的type
      params.type = 3
    },
    6: () => {
      // 设置电台的评论
      params.type = 4
    },
    7: () => {
      // 设置动态的评论
      params.type = 6
    },
    10: () => {
      // 设置动态的评论
      params.type = 1
    },
    11: () => {
      // 设置动态的评论
      params.type = 5
    }
  }
  currentType && currentType[type] && currentType[type]()
  store.sendOrDelComment(params)
}
</script>

<style scoped lang="scss">
.Reply {
  position: relative;
  &:before {
    content: '^';
    position: absolute;
    top: -8px;
    color: v-bind('store.theme.secondaryBgColor');
  }
}
</style>
